<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <link rel="stylesheet" href="/adminthemes/layuii/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/adminthemes/bootstrop/bootstrap/dist/css/bootstrap.css" media="all">
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
    <!-- The styles -->
    <link href="/adminthemes/area/css/bootstrap-cerulean.min.css" rel="stylesheet">

    <link href="/adminthemes/area/css/charisma-app.css" rel="stylesheet">
    <link href="/adminthemes/area/bower_components/fullcalendar/dist/fullcalendar.css" rel='stylesheet'>
    <link href="/adminthemes/area/bower_components/fullcalendar/dist/fullcalendar.print.css" rel='stylesheet'
          media='print'>
    <link href="/adminthemes/area/bower_components/chosen/chosen.min.css" rel='stylesheet'>
    <link href="/adminthemes/area/bower_components/colorbox/example3/colorbox.css" rel='stylesheet'>
    <link href="/adminthemes/area/bower_components/responsive-tables/responsive-tables.css" rel='stylesheet'>
    <link href="/adminthemes/area/bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css"
          rel='stylesheet'>
    <link href="/adminthemes/area/css/jquery.noty.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/noty_theme_default.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/elfinder.min.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/elfinder.theme.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/jquery.iphone.toggle.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/uploadify.css" rel='stylesheet'>
    <link href="/adminthemes/area/css/animate.min.css" rel='stylesheet'>

    <!-- jQuery -->
    <script src="/adminthemes/area/bower_components/jquery/jquery.min.js"></script>
    <title>添加供应商</title>
</head>

<body>

<h1 style="font-size: 20px;margin-left: 40%;font-weight: bold">添加员工负责区域</h1>
<form class="form-horizontal group-border-dashed" action="#"
      style="border-radius: 0px;">

    <div class="form-group" style=" margin-left:20%;margin-right: 30%">
        <label  for="provinceId">请选择省份</label>
        <select  name="province" id="provinceId"  class="form-control" data-rel="chosen">
            <#list provinceList as province>
                <option value="${province.area_code}">${province.area_name}</option>
            </#list>
        </select>
    </div>
    <div class="form-group" style=" margin-left:20%;margin-right: 30%">
        <label for="cityId">选择城市:</label>
        <select  name="city" id="cityId"  class="form-control" data-rel="chosen">
            <option>选择城市</option>
        </select>
    </div>
    <div class="form-group" style=" margin-left:20%;margin-right: 30%">
        <label for="areaId">选择区域:</label>
        <select name="area" id="areaId"  class="form-control" data-rel="chosen" >
            <option>选择区域</option>
        </select>
    </div>
    <!--<div class="form-group" style=" margin-left:20%;margin-right: 30%">-->
        <!--<label for="StreetId">选择街道:</label>-->
        <!--<select name="street" id="StreetId"  class="form-control" data-rel="chosen" >-->
            <!--<option>选择街道</option>-->
        <!--</select>-->
    <!--</div>-->
    <!--<div class="form-group" style=" margin-left:20%;margin-right: 30%">-->
        <!--<label for="VillageId">选择村:</label>-->
        <!--<select name="village" id="VillageId"  class="form-control" data-rel="chosen" >-->
            <!--<option>选择村</option>-->
        <!--</select>-->
    <!--</div>-->
    <div class="form-group" style=" margin-left:20%;margin-right: 30%">
        <label for="staff">选择员工:</label>
        <select data-placeholder="员工" name="staff" id="staff" class="form-control" data-rel="chosen">
            <option value="0">请选择...</option>
            <#list member as member>
                <if member??>
                    <option
                            value="${member.member_id}">${member.uname}</option>
                </if>
            </#list>
        </select>
    </div>
    <div class="form-actions">
        <button style="margin-left:40%" type="button" class="btn btn-primary"
                onclick="saveStafArea()">
            保存
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn" type="reset" onclick="repic()">重写</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button style="margin-left:5%" class="btn" type="button" onclick="history.back()">返回
        </button>

    </div>
</form>


<!--/row-->
</body>
<script type="text/javascript" src="/adminthemes/layuii/layui/layui.js"></script>
<script >
    /*页面加载就开始执行*/
    $(document).ready(function () {

        $("#provinceId").change(function () {
            //alert("222");
//            $.get("/web/area/getCityByProvinceId.do?id="+$("#provinceId").val(),function(data){
//                if(data.status){
//                    var result = "<option>选择城市</option>";
//                    $.each(data.obj,function(n,value){
//                        result +="<option value='"+value.cityid+"'>"+value.city+"</option>";
//                    });
//                    $("#cityId").html('');
//                    $("#cityId").append(result);
//                }
//            },"json");
            var id=$("#provinceId").val();
            var postData={id:id,};
            $.ajax({
                type: "Get",
                url: "/web/sysarea/getSysCityByProvinceId.do",
                data: postData,
                dataType: "json",
                success: function (data) {
                    if(data.status){
                        var result = "<option>选择城市</option>";
                        $.each(data.obj,function(n,value){
                            result +="<option value='"+value.area_code+"'>"+value.area_name+"</option>";
                        });
                        $("#cityId").html('');
                        $("#cityId").append(result);
                    }
                }
            })
    });


    $("#cityId").change(function () {
        var id=$("#cityId").val();
        var postData={id:id};
        $.ajax({
            type: "Get",
            url: "/web/sysarea/getSysAreaByCityId.do",
            data: postData,
            dataType: "json",
            success: function (data) {
                if(data.status){
                    var result = "<option>选择区域</option>";
                    $.each(data.obj,function(n,value){
                        result +="<option value='"+value.area_code+"'>"+value.area_name+"</option>";
                    });
                    $("#areaId").html('');
                    $("#areaId").append(result);
                }
            }
        })
    });


        $("#areaId").change(function () {
            var id=$("#areaId ").val();
            var postData={id:id};
            $.ajax({
                type: "Get",
                url: "/web/sysarea/getSysStreetByAreaId.do",
                data: postData,
                dataType: "json",
                success: function (data) {
                    if(data.status){
                        var result = "<option>选择街道</option>";
                        $.each(data.obj,function(n,value){
                            result +="<option value='"+value.area_code+"'>"+value.area_name+"</option>";
                        });
                        $("#StreetId").html('');
                        $("#StreetId").append(result);
                    }
                }
            })
        });

        $("#StreetId").change(function () {
            var id=$("#StreetId ").val();
            var postData={id:id};
            $.ajax({
                type: "Get",
                url: "/web/sysarea/getSysVillageByStreetId.do",
                data: postData,
                dataType: "json",
                success: function (data) {
                    if(data.status){
                        var result = "<option>选择村</option>";
                        $.each(data.obj,function(n,value){
                            result +="<option value='"+value.area_code+"'>"+value.area_name+"</option>";
                        });
                        $("#VillageId").html('');
                        $("#VillageId").append(result);
                    }
                }
            })
        });
    });

    function saveStafArea() {
        layui.use('layer', function () {
            var $ = layui.jquery, layer = layui.layer;
            var pid=$("#provinceId").val();
            var cityId = $("#cityId").val();
            var areaId = $("#areaId").val();
            var streetid = $("#StreetId").val();
            var villageid = $("#VillageId").val();
            var staff = $("#staff").val();
            var postData={
                pid:pid,
                cityId:cityId,
                areaId:areaId,
                streetId:streetid,
                villageId:villageid,
                staff:staff
            }
            $.ajax({
                type: "POST",
                url: "/web/sysarea/creatStaffArea.do",
                data: postData,
                dataType: "json",
                success: function (data) {
                    if (data = true) {
                        layer.open({
                            content: '添加完成，请返回'
                            , yes: function (index, layero) {
                                location.href = '/admin/insurance/staffarealist.do';
                            }
                            , cancel: function () {
                                return false;// 开启该代码可禁止点击该按钮关闭
                            }
                        });
                    }
                    else {
                        layer.alert('添加失败，请重试！');
                    }
                }
            })
        });
    }



</script>
</html>